<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <!-- Select2 -->
    <link rel="stylesheet" href="<spring:url value='/plugins/select2/select2.min.css'/>">

    <%@include file="../common/lib_css.jspf"%>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <%@include file="../common/header.jspf"%>

    <!-- Left side column. contains the logo and sidebar -->
    <%@include file="../common/sidebar.jspf"%>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                会话管理
                <small>Session Management</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="<spring:url value='/index'/>"><i class="fa fa-dashboard"></i>首页</a></li>
                <li class="active">会话管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Your Page Content Here -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <i class="fa fa-list"></i>
                            <h6 class="box-title">会话列表</h6>
                            <div class="box-tools">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" id="session-add"><i class="glyphicon glyphicon-plus"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="box-group" id="accordion">
                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                <div class="panel box">
                                    <div class="box-header with-border">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="font-size: 14px;">
                                                20170909113450 - 一键触发
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse">
                                        <div class="box-body">
                                            <div class="box-group" id="accordion1">
                                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                                <div class="panel box">
                                                    <div class="box-header with-border">
                                                        <h4 class="box-title">
                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" style="font-size: 14px;">
                                                                发包器 IP=1.1.1.1,广州发包器1
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOne1" class="panel-collapse collapse">
                                                        <div class="box-body">
                                                            <div class="box-group" id="accordion2">
                                                                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                                                <div class="panel box">
                                                                    <div class="box-header with-border">
                                                                        <h4 class="box-title">
                                                                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" style="font-size: 14px;">
                                                                                进程ID ： 123
                                                                            </a>
                                                                        </h4>
                                                                    </div>
                                                                    <div id="collapseOne2" class="panel-collapse collapse">
                                                                        <div class="box-body">
                                                                            <table class="table table-bordered table-hover">
                                                                                <thead>
                                                                                <tr>
                                                                                    <th>会话ID</th>
                                                                                    <th>反弹器IP</th>
                                                                                    <th>描述</th>
                                                                                    <th>丢包</th>
                                                                                    <th>时延</th>
                                                                                    <th>抖动</th>
                                                                                    <th>总体评分</th>
                                                                                </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="panel box">
                                                                    <div class="box-header with-border">
                                                                        <h4 class="box-title">
                                                                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" style="font-size: 14px;" >
                                                                                进程ID ： 456
                                                                            </a>
                                                                        </h4>
                                                                    </div>
                                                                    <div id="collapseTwo2" class="panel-collapse collapse">
                                                                        <div class="box-body">

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel box">
                                                    <div class="box-header with-border">
                                                        <h4 class="box-title">
                                                            <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" style="font-size: 14px;">
                                                                发包器 IP=1.1.1.1,广州发包器2
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseTwo1" class="panel-collapse collapse">
                                                        <div class="box-body">

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel box">
                                    <div class="box-header with-border">
                                        <h4 class="box-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" style="font-size: 14px;">
                                                20170909113450 - 详细触发
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                        <div class="box-body">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <div class="box ">
                        <div class="box-header with-border">
                            <i class="fa fa-bar-chart-o"></i>
                            <h3 class="box-title">会话图表</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <!-- /.col -->
                                <div class="col-md-4">
                                    <ul class="nav nav-pills nav-stacked">
                                        <li>
                                            <a href="#">
                                                丢包
                                                <span class="pull-right text-red">
                                                    2%
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                时延
                                                <span class="pull-right text-yellow">
                                                    100 ms
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                抖动
                                                <span class="pull-right text-blue">
                                                    10 ms
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- /.col -->
                                <div class="col-md-8">
                                    <div id="session-chart" style="height: 250px;"></div>
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- ./box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <%@include file="../common/footer.jspf"%>

    <!-- add session pop window -->
    <div class="modal" id = "add-session-pop">
        <div class="modal-dialog modal-normal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close close-btn" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">新增</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" >循环次数</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;">
                                    <option value="1">无限循环</option>
                                    <option value="2">一次循环</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" >触发规则</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;" id="add-session-rule-select">
                                    <option value="1">一键触发</option>
                                    <option value="2">详细触发</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" id="add-session-model-select">
                            <label class="col-sm-3 control-label" >触发模板</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;">
                                    <option value="1">触发模板-1</option>
                                    <option value="2">触发模板-2</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="display: none;" id="add-session-pack-select">
                            <label class="col-sm-3 control-label" >发包器</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;">
                                    <option value="1">发包器-1</option>
                                    <option value="2">发包器-2</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="display: none;" id="add-session-re-select">
                            <label class="col-sm-3 control-label" >反弹器</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;">
                                    <option value="1">反弹器-1</option>
                                    <option value="2">反弹器-2</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="display: none;" id="add-session-pm-select">
                            <label class="col-sm-3 control-label" >参数模板</label>
                            <div class="col-sm-9">
                                <select class="form-control" style="width: 100%;">
                                    <option value="1">参数模板-1</option>
                                    <option value="2">参数模板-2</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left close-btn" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<%@include file="../common/lib_js.jspf"%>
<!-- FLOT CHARTS -->
<script src="/plugins/flot/jquery.flot.min.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="/plugins/flot/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="/plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="/plugins/flot/jquery.flot.categories.min.js"></script>
<!-- Select2 -->
<script src="<spring:url value='/plugins/select2/select2.full.min.js'/>"></script>
<!-- 会话页面 JS -->
<script src="<spring:url value="/js/session/session.js"/>"></script>


</body>
</html>
